import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';

import { Layout, Menu, Icon } from 'antd';
import { Logo } from './style';
import './index.less'
import { Conf } from '../../utils'

import { 
    navleftAction as actionCreates
} from '../../store/action'; 
import { mainService } from '../../service';

class NavLeft extends PureComponent{
    state = {
        defaultSelectedKeys:["0"]
    }
    render(){
        const { theme, styleObj, collapsedWidth, className, collapsible, trigger, mode } = Conf.nav_Conf;
        const { collapsed, openKeys, rootSubmenuKeys, navmenu, onOpenChange } = this.props;
        const { defaultSelectedKeys } = this.state;

        return(
            <Layout.Sider
                trigger={trigger}
                collapsible={collapsible}
                collapsed={collapsed}
                theme={theme}
                collapsedWidth={collapsedWidth}
                className={className}
                style={styleObj}
            >
                <Logo />
                <Menu
                    style={{ width:collapsed?collapsedWidth:'' }}
                    defaultSelectedKeys={defaultSelectedKeys}
                    defaultOpenKeys={openKeys}
                    selectedKeys={defaultSelectedKeys}
                    theme={theme}
                    mode={mode}
                    openKeys={openKeys}
                    onOpenChange={(oKeys)=>{onOpenChange(oKeys,openKeys,rootSubmenuKeys)}}
                    onSelect={this.onSelectChange}
                >
                    <Menu.Item key="0">
                        <Link to="/">
                            <Icon type="home" />
                            <span>首页</span>
                        </Link>
                    </Menu.Item>
                    { this.getMenu(navmenu) }
                </Menu>

            </Layout.Sider>
        )
    }
    onSelectChange = (item)=>{
        this.setState({
            defaultSelectedKeys:[item.key]
        })
    }
    getMenu=(data)=>{
        return data.map((item)=>{
            if(item.children===undefined || item.children===[] || item.children==null || item.children==="" || item.children.length<1){
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.url?item.url:""}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                );
            }else{
                return (
                    <Menu.SubMenu
                        key={item.key}
                        title={<span><Icon type={item.icon} /><span>{item.title}</span></span>}
                    >
                        {this.getMenu(item.children)}
                    </Menu.SubMenu>
                );
            }
        })
    }

    async componentDidMount(){
        const { history, bindOpenMenu } = this.props;
        const path = history.location.pathname;
        let res = await mainService.getMenu(0);
        this.props.bindMenu(res);
        if(path!=="/"){
            let newres = await mainService.crud('bindmenu',{"url":path})
            if(newres.code===0){
                let d=newres.data;
                let dfk = [String(d.key)];
                let dfok = Array.from(d.openkeys,x=>String(x));
                bindOpenMenu(dfok);
                this.setState({
                    defaultSelectedKeys:dfk
                })
            }
        }
    }
}

const mapStateToProps=(state)=>{
    const collapsed=state.getIn(['header','collapsed']);
    const openKeys=state.getIn(['navleft','openKeys']).toJS();
    const rootSubmenuKeys=state.getIn(['navleft','rootSubmenuKeys']).toJS();
    const navmenu=state.getIn(['navleft','navmenu']).toJS();
    
    return {
        collapsed,
        openKeys,
        rootSubmenuKeys,
        navmenu
    };
};
const mapDispatchToProps=(dispatch)=>{
    return {
        //点击切换下拉菜单,,屏蔽多开,只能单开一个下拉菜单
        onOpenChange(oKeys,propsKeys,rootSubmenuKeys){
            //在原来的propsKeys 中查找 你点击的 key
            const latestOpenKey =oKeys.find(key =>propsKeys.indexOf(key) === -1);
            let value=[];
            if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                value=oKeys;
            } else {                
                value=latestOpenKey ? [latestOpenKey] : [];
            }
            dispatch(actionCreates.openSubMenu(value));
        },
        //初始化设置open菜单
        bindOpenMenu(value){
            dispatch(actionCreates.openSubMenu(value));
        }
        //获取菜单
        ,bindMenu(res){
            let result=res.data;
            dispatch(actionCreates.getMenuInfo(result));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(NavLeft));